<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>shop</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
</head>
<body background="../img/back.jpg">
<div class="container">
    <div class="row">
        <div class="span4">
            <img alt="100x100" th:src="@{/img/cole.jpg}"  style="width: 300px;height: 300px"/><br>
            <form th:action="@{/shop/cole}" method="post">
                可口可乐
                价格 3元<br>
                购买数量<input type="number" name="num" class="num" max="100" min="1">
                <input type="number" value="3" name="price" hidden="hidden" >
                <input type="text" value="可口可乐" name="proname" hidden="hidden" >
                <button type="submit" class="btn">购买</button>
            </form>

        </div>
        <div class="span4">
            <img alt="100x100" th:src="@{/img/ddy.jpg}"  style="width: 300px;height: 300px"/><br>
            <form th:action="@{/shop/ddy}" method="post">
                大豆油
                价格 15元<br>
                购买数量<input type="number" name="num" class="num" max="100" min="1">
                <input type="number" value="3" name="price" hidden="hidden">
                <input type="text" value="大豆油" name="proname" hidden="hidden" >
                <button type="submit" class="btn">购买</button>
            </form>
        </div>
        <div class="span4">
            <img alt="100x100" th:src="@{/img/hzl.jpg}"  style="width: 300px;height: 300px"/><br>
            <form th:action="@{/shop/hzl}" method="post">
                海之蓝
                价格 100元<br>
                购买数量<input type="number" name="num" class="num" max="100" min="1">
                <input type="number" value="3" name="price" hidden="hidden">
                <input type="text" value="海之蓝" name="proname" hidden="hidden" >
                <button type="submit" class="btn">购买</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="span4">
            <img alt="100x100" th:src="@{/img/md.jpg}"  style="width: 300px;height: 300px"/><br>
            <form th:action="@{/shop/md}" method="post">
                脉动
                价格 4元<br>
                购买数量<input type="number" name="num" class="num" max="100" min="1">
                <input type="number" value="3" name="price" hidden="hidden">
                <input type="text" value="脉动" name="proname" hidden="hidden" >
                <button type="submit" class="btn">购买</button>
            </form>
        </div>
        <div class="span4">
            <img alt="100x100" th:src="@{/img/ptj.jpg}"  style="width: 300px;height: 300px"/><br>
            <form th:action="@{/shop/ptj}" method="post">
                葡萄酒
                价格 88元<br>
                购买数量<input type="number" name="num" class="num" max="100" min="1">
                <input type="number" value="3" name="price" hidden="hidden">
                <input type="text" value="葡萄酒" name="proname" hidden="hidden" >
                <button type="submit" class="btn">购买</button>
            </form>
        </div>
        <div class="span4">
            <img alt="100x100" th:src="@{/img/whh.jpg}"  style="width: 300px;height: 300px"/><br>
            <form th:action="@{/shop/whh}" method="post">
                娃哈哈
                价格 4元<br>
                购买数量<input type="number" name="num" class="num" max="100" min="1">
                <input type="number" value="3" name="price" hidden="hidden">
                <input type="text" value="娃哈哈" name="proname" hidden="hidden" >
                <button type="submit" class="btn">购买</button>
            </form>
        </div>
    </div>
</div>
<script>
    document.getElementsByClassName("num").addEventListener("input",function(event){
        event.target.value = event.target.value.replace(/-/g,"");
    });
</script>
</body>
</html>